<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:21
-->
<template>
  <div class="home">
    <div class="wrapper">
      <!-- 轮播图开始 -->
      <el-carousel height="300px">
        <el-carousel-item v-for="item in carousels" :key="item.id">
          <img
            width="100%"
            :src="item.url"
          />
        </el-carousel-item>
      </el-carousel>
      <!-- 轮播图结束 -->
    </div>
    <!-- 研学项目开始 -->
      <div class="projects">
        <div class="wrapper">
          <div class="title">研学精选项目</div>
          <div class="project" v-for="item in projects" :key="item.id" @click="projectHandler(item.id)">
            <div class="left">
              <img
                width="100%"
                :src="item.figure"
              />
            </div>
            <div class="right">
              <div class="name">{{item.name}}</div>
              <div class="time">{{item.beginTime | fmtDate}} - {{item.endTime | fmtDate}}</div>
              <div class="content">{{item.introduce}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 研学项目结束 -->
      <!-- 学生风采开始 -->
      <div class="article">
        <div class="wrapper">
          <div class="title">
            <h2>学生风采</h2>
            <div class="art">
              <div class="left" v-for="item in articles" :key="item.id" @click="articleHandler(item.id)">
                <div class="pic">
                  <img
                    width="100%"
                    :src="item.cover"
                  />
                </div>
                <div class="text">
                  <div class="content">
                    {{item.title}}
                  </div>
                  <div class="time">{{item.publishTime | fmtDate}}</div>
                  <div class="name">{{item.baseUser.realname}}</div>
                </div>
              </div>
              <!-- <div class="center"></div> -->
              <!-- <div class="right"></div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 学生风采结束 -->
      <div class="question">
        <h2>常见问题</h2>
        <p class="p1">孩子年龄太小去暑期游学合适吗？夏令营的时候怎么保障安全？</p>
        <p>其实年龄小的时候多出去是非常有利于孩子的身心的，能够在成长阶段多看看外面的世界、多吸收不同的文化、学习不同的思维方式。孩子的适应性和应变能力有的时候比大人想象的要强很多，但是在家里由于长辈的呵护而得不到锻炼，出去和别的小朋友一起学习独立，学习怎么成为集体的一分子，学习平等待人，这对少儿和青少年的长成都很有帮助。大多数家长担心的会是小孩子出去的安全问题，所以建议在选择夏令营团的时候务必仔细。英孚在这方面有50多年的经验，出发会有国内领队带团；而国外夏令营的学校都是英孚自己的学校，海外的领队也是学校精心挑选的人，全程都是英孚的工作人员负责。家长甚至可以通过MyEF系统登陆看到整个夏令营团队的课程、活动规划、寄宿家庭信息等，全程追踪，而领队也会随时和家长保持联系。</p>
        <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
        <p class="p1">参加夏令营到底有什么好处？</p>
        <p>国外流行的游学夏令营一般都是有一个主题的，宗旨是让一群年轻的小朋友聚在一起，在导师的带领下参加围绕该主题的活动，促进友谊的同时，可以和有共同兴趣爱好的人一起学习、交流分享。所以夏令营是让孩子们拓展视野的好时机，比如你的小孩从小就有表演天分，可是作为家长却不知道应该怎么做让她/他进一步的发挥，那参加表演艺术主题的夏令营就可以给予一定的指导和空间，甚至会安排小舞台让她/他进行表演，而往往因这样的机缘巧合也会更加容易收获真挚的友情。EF英孚夏令营除了有学习语言为主的夏令营活动，也有各式主题类型的国际夏令营，比如足球夏令营、探险夏令营、冲浪夏令营、马术夏令营、表演明星课程、时尚和艺术工作室等。</p>
        <img src="http://121.199.29.84/xxtx-ui/static/img/question1.e525c7f5.jpg" alt="">
      </div>
  </div>
</template>
<script>
import {get} from '../utils/request'
export default {
  data(){
    return{
      carousels:[],
      projects:[],
      articles:[],
    }
  },
  methods:{
    articleHandler(id){
      this.$router.push({
        path:'/article',
        query:{id:id},
      })
    },
    projectHandler(id){
      this.$router.push({
        path:'/project',
        query:{id:id},
      })
    },
    // 查询所有轮播图
    findAllCarousel(){
      // 数据交互
      get('/index/carousel/findAll').then(res=>{
        console.log(res);
        if(res.status == 200){
          this.carousels = res.data
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },
    findALLProject(){
      let data = {
        page:1,
        pageSize:99
      }
      get('/index/project/pageQuery',data).then((res)=>{
        console.log(res);
        if(res.status == 200){
          this.projects = res.data.list
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },
    findAllArticle(){
      let data = {
        page:1,
        pageSize:99,
      }
      get('/index/article/pageQuery',data).then((res)=>{
        console.log(res);
        if(res.status == 200){
          this.articles = res.data.list
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    }
  },
  created(){
    this.findAllCarousel()
    this.findALLProject()
    this.findAllArticle()
  }
}
</script>
<style lang="scss" scope>
.question{
    width: 70%;
    position: relative;
    left: 9%;
    .p1{
      font-weight: 700;
      font-size: 16px;
      line-height: 2em;
      color: #333;
    }
}
.projects {
  .wrapper {
    width: 1240px;
    .title {
      font-size: 20px;
      line-height: 4em;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        // height: 200px;
        // background-color: pink;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: 500;
          font-size: 15px;
        }
        .time {
          margin: 1em 0;
        }
        .content {
          font-size: 14px;
        }
      }
    }
  }
}
.article {
  .wrapper {
    .title {
      line-height: 4em;
      font-size: 20px;
      .art {
        display: flex;
        justify-content: space-between;
        .left {
          flex-basis: 24%;
          cursor: pointer;
          .pic {
          width: 100%;
          height:160px;
          border-radius: 5px;
          overflow: hidden;
        }
          .text {
            padding: 1em 1em;
            line-height: 2em;
            font-size: 16px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
          }
           .text:hover{
              background-color: aqua;
            }
        }
        .center {
          height: 100px;
          flex-basis: 24%;
          background-color: pink;
        }
        .right {
          height: 100px;
          flex-basis: 24%;
          background-color: aqua;
        }
      }
    }
  }
}
</style>